<template>
    <div>
        <div class="title">
            <div class="back" @click="$router.back()">
                <span> <img src="../assets/img/fanhui.png" alt=""></span>
            </div>
            <div class="gamename">确认订单</div>
        </div>
        <div class="caritem" v-for="(item, index) in list " :key="index">
            <div class="right"><img :src="item.img" alt="">
                <div class="content">
                    <p>{{ item.name }}</p>
                    <p>￥{{ item.price }}</p>
                </div>
            </div>
        </div>
        <div class="couponUse">
            <div class="item">
                <p>优惠券</p>
                <p>未使用 <span>></span></p>
            </div>
        </div>
        <div class="goods" style=" border-bottom: 5px solid #f5f5f5;">
            <div class="item">
                <p class="goodsitem"><span>{{ list.length }}</span>个商品</p>
                <p class="goodsitem"><span>总计:</span> ￥{{ money / 100 }}元</p>
            </div>
        </div>
        <van-submit-bar :price="money" button-text="支付订单" @submit="onSubmit" :label="'实付:'">

        </van-submit-bar>
        <div class="bottom" style="height: 50px
        ;"></div>
    </div>
</template>
<style lang="scss" scoped>
.delbutton {
    .van-submit-bar__bar {
        justify-content: space-between;
    }
}

.van-submit-bar {
    // bottom: 10px;
    border: 1px solid #cccccc;
    border-left: none;
}

.van-button--round {
    border-radius: 0;
    height: 50px;
}

.van-submit-bar__bar {
    padding: 0px 0px 0px 20px;
}

.van-submit-bar__text {
    text-align: center;
    margin-left: 30px;

    span {
        font-size: 13px;
    }
}

.couponUse,
.goods {
    border-top: 5px solid #f5f5f5;
    // border-bottom: 5px solid #f5f5f5;
    // margin-top: px;

    .item {
        padding: 15px 12px;
        display: flex;
        justify-content: space-between;

        .goodsitem {
            font-size: 12px;

            &:nth-child(1) {
                span {
                    color: #ff5722;
                    font-size: 12px;
                    margin-right: 5px;
                }
            }

            &:nth-child(2) {
                span {
                    color: #999999;
                    font-size: 12px;
                    margin-right: 0px;
                }
            }
        }
    }

}

.title {
    // position: fixed;
    position: relative;
    z-index: 2;
    display: flex;
    background-color: #333333;
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0 12px;
    color: #cccccc;
    justify-content: space-between;
    box-sizing: border-box;
    z-index: 2;
    top: 0;
    border-bottom: 2px solid #686868;

    .back {
        display: flex;
        align-items: center;

        span {
            font-size: 16px;

            img {
                width: 16px;
                height: 16px;
            }
        }
    }

    .gamename {
        flex: 1;
        text-align: center;
        font-size: 17px;
    }

}

.caritem {
    padding: 20px 5px 10px 15px;
    display: flex;
    align-items: center;

    .right {
        display: flex;

        img {
            width: 150px;
            height: 89px;
        }

        .content {
            margin-left: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            p {
                &:nth-child(1) {
                    font-size: 15px;
                }

                &:nth-child(2) {
                    color: #ff855f;
                }
            }
        }
    }

    input {
        width: 15px;
        margin-right: 10px;
        height: 15px;
    }
}
</style>
<script>
import { getTopGame } from '@/api/homeView';
import { Toast } from 'vant';
export default {

    data() {
        return {
            orderList: [],//通过$route传递过来的URL参数，用作等会双重遍历，取出与所有游戏列表两者都有的游戏
            allItem: [],//所有游戏列表，用作渲染图片单价，名称
            list: [],//当前订单列表
            userOrderList: JSON.parse(localStorage.getItem('listOrder')) || [],//如果localStorage找不到就创建一个数组
        }
    }, methods: {
        getTopGame() {
            getTopGame().then(data => {
                this.allItem = data
                for (var i in this.orderList) {
                    for (let j in this.allItem) {
                        if (this.allItem[j].name == this.orderList[i]) {
                            this.list.push(this.allItem[j])
                        }
                    }
                }
            })
        }, onSubmit() {
            Toast('已支付订单')
            this.userOrderList.push(this.list)
            let time = new Date()
            time = time.toLocaleString()//时间转换
            this.list[0].iscoupon = time//将时间价格存入第0个数据里面
            this.list[0].type = this.money / 100//将时间价格存入第0个数据里面
            window.localStorage.setItem('listOrder', JSON.stringify(this.userOrderList))
            this.$router.push({ path: '/shopCar' })
            this.$emit('delCarItem', this.list)
        }
    },

    created() {
        // this.$route.query;//push调过来传递的列表，但是变成了一个对象
        this.orderList = this.$route.query
        this.getTopGame()
        // console.log(this.orderList);
    }, computed: {
        money: function () {
            //用于计算组件的价钱
            return this.list.reduce((total, item) => {
                return total += item.price * 100
            }, 0)
        },
    }
}
</script>